<template>
  <div>
    <VueForm
      ref="vueForm"
      :formData="form_data"
      :formItem="form_item"
      :formHandler="form_handler"
    >
      <!-- 保养日期 -->
      <template v-slot:maintain>
        <el-row :gutter="30">
          <el-col :span="6">
            <el-date-picker
              v-model="form_data.maintainDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-row>
      </template>
      <!-- 能源类型 -->
      <template v-slot:energy>
        <el-radio-group
          v-model="form_data.energyType"
          @change="changeEnergyType"
        >
          <el-radio
            v-for="item in energyType"
            :key="item.value"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
        <div
          class="progress-bar-wrap"
          v-if="form_data.energyType == 3 || form_data.energyType == 1"
        >
          <span class="label-text">电量：</span>
          <el-row>
            <el-col :span="10">
              <el-slider v-model="form_data.electric" show-input></el-slider>
            </el-col>
          </el-row>
        </div>
        <div
          class="progress-bar-wrap"
          v-if="form_data.energyType == 3 || form_data.energyType == 2"
        >
          <span class="label-text">油量：</span>
          <el-row>
            <el-col :span="10">
              <el-slider v-model="form_data.oil" show-input></el-slider>
            </el-col>
          </el-row>
        </div>
      </template>
      <!-- 租赁价格 -->
      <template v-slot:leaseList>
        <el-row :gutter="20">
          <el-col
            :span="4"
            v-for="item in leaseListData"
            :key="item.carsLeaseTypeId"
          >
            <div>{{ item.carsLeaseTypeName }}</div>
            <el-input
              v-model="item.price"
              controls-position="right"
              :min="0"
              :max="10000"
              placeholder="请输入价格"
              style="width: 100%"
            ></el-input>
          </el-col>
        </el-row>
      </template>
      <!-- 车辆属性 -->
      <template v-slot:carsAttr>
        <el-button
          v-for="item in carsBasicList"
          :key="item.id"
          :type="carsBasicList_id === item.id ? 'danger' : ''"
          @click="getTypeList(item)"
          >{{ item.value }}</el-button
        >
      </template>
      <!-- 车辆描述 -->
      <template v-slot:Wangeditor>
        <div style="border: 1px solid #ccc" class="content">
          <Toolbar
            class="toolbar"
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            class="editor"
            style="height: 500px; overflow-y: hidden"
            v-model="form_data.content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
          />
        </div>
      </template>
    </VueForm>
  </div>
</template>
<script>
  // 富文本组件
  import { Editor, Toolbar } from "@wangeditor/editor-for-vue"
  import { GetCarsTypeBasis } from "@/api/carAttr"
  import { ParkingList } from "@/api/parking"
  import { getBrandList } from "@/api/brand"
  import { CarsInfoAdd } from "@/api/car"
  // 组件
  import VueForm from "@c/form"
  export default {
    name: "CarsAdd",
    components: { VueForm, Editor, Toolbar },
    data() {
      return {
        // id
        id: "",
        // 表单数据
        form_data: {
          parkingId: "", //停车场
          carsBrandId: "", //车辆品牌
          carsMode: "", //车辆型号
          carsNumber: "", //车牌号
          carsFrameNumber: "", //车架号
          engineNumber: "", //发动机号
          carsImg: "11", //缩略图
          countKm: "", //可行驶公里
          yearCheck: true, //年检
          gear: 1, //档位
          energyType: 2, //能源类型
          electric: 0, //电量
          oil: 0, //油量
          carsAttr: "", //车辆属性
          content: "", //车辆描述
          maintainDate: "", //保养日期
          status: true, //禁启用
        },
        // 传给子组件表单的值
        form_item: [
          {
            type: "Select",
            label: "车辆品牌",
            placeholder: "请选择车辆品牌",
            prop: "carsBrandId",
            select_vlaue: "id", // 自有的私有属性
            select_label: "nameCh",
            options: [],
            required: true,
          },
          {
            type: "Select",
            label: "停车场",
            placeholder: "请选择停车场",
            select_vlaue: "id", // 自有的私有属性
            select_label: "parkingName",
            prop: "parkingId",
            options: [],
            required: true,
          },
          {
            type: "Input",
            label: "车辆型号",
            placeholder: "请输入车辆型号",
            prop: "carsMode",
            required: true,
          },
          {
            type: "Input",
            label: "车牌号",
            placeholder: "请输入车牌号",
            prop: "carsNumber",
            required: true,
          },
          {
            type: "Input",
            label: "车架号",
            placeholder: "请输入车架号",
            prop: "carsFrameNumber",
            required: true,
          },
          {
            type: "Upload",
            label: "缩略图",
            placeholder: "请上传缩略图",
            prop: "carsImg",
            // required: true,
          },
          {
            type: "Input",
            label: "发动机号",
            placeholder: "请输入发动机号",
            prop: "engineNumber",
            required: true,
          },
          {
            type: "Radio",
            label: "年检",
            placeholder: "请选择年检",
            prop: "yearCheck",
            options: this.$store.state.config.year_check,
          },
          {
            type: "Slot",
            slotName: "maintain",
            prop: "maintainDate",
            label: "保养日期",
          },
          {
            type: "Radio",
            label: "档位",
            placeholder: "请选择档位",
            prop: "gear",
            options: this.$store.state.config.gear,
          },
          {
            type: "Slot",
            slotName: "energy",
            prop: "energyType",
            label: "能源类型",
          },
          {
            type: "Input",
            label: "可行驶公里",
            prop: "countKm",
          },
          {
            type: "Slot",
            slotName: "carsAttr",
            prop: "carsAttr",
            label: "车辆属性",
          },
          {
            type: "Slot",
            slotName: "Wangeditor",
            prop: "content",
            label: "车辆描述",
          },
          {
            type: "Slot",
            slotName: "leaseList",
            prop: "lease",
            label: "租赁价格",
          },
          {
            type: "Disabled",
            label: "禁启用",
            placeholder: "请选择禁启用",
            prop: "status",
          },
        ],
        form_handler: [
          {
            label: "确定",
            key: "submit",
            type: "danger",
            handler: () => this.formValidate(),
          },
          { label: "重置", key: "reset" },
        ],
        energyType: this.$store.state.config.energyType,
        // 车辆租赁类型
        leaseListData: [],
        // 车辆公共属性列表
        carsBasicList: [],
        // 车辆公共属性id
        carsBasicList_id: "",
        // 当前公用属性数据
        currentCarsBasicListData: {},
        // 富文本配置
        editor: null,
        toolbarConfig: {},
        editorConfig: { placeholder: "请输入内容..." },
        mode: "default", // or 'simple'
      }
    },
    methods: {
      changeEnergyType() {},
      // 获取车辆公用属性
      async getCarsTypeBasis() {
        try {
          const data = await GetCarsTypeBasis()
          this.carsBasicList = data.data.data.data
        } catch (err) {
          console.log(err)
        }
      },
      // 保存并处理当前公共属性数据
      getTypeList(data) {
        console.log(data)
        this.carsBasicList_id = data.id
        // 存储当前数据
        this.currentCarsBasicListData = data
      },
      // 富文本配置项属性
      onCreated(editor) {
        this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      },
      // 判断表单验证是否通过
      formValidate() {
        // this.formatCarsAttr()
        this.$refs.vueForm.$refs.form.validate((valid) => {
          if (valid) {
            this.id ? this.edit() : this.add()
          } else {
            console.log("error submit!!")
            return false
          }
        })
      },
      // 修改车辆属性
      edit() {},
      // 新增车辆属性
      async add() {
        // console.log(this.form_data)
        const params = {
          ...this.form_data,
          leasePrice: this.leaseListData,
        }
        try {
          const data = await CarsInfoAdd(params)
          console.log(data)
        } catch (err) {
          console.log(err)
        }
      },
      // 获取车辆品牌和停车场列表数据
      async getFormCarsBrand_ParkingList() {
        try {
          let params = {
            pageSize: 999,
            pageNumber: 1,
          }
          const data = await ParkingList(params)
          const data1 = await getBrandList(params)
          const parkingListData = data.data.data.data
          const BrandListData = data1.data.data.data
          const parkingList = this.form_item.filter(
            (item) => item.prop === "parkingId"
          )
          const brandList = this.form_item.filter(
            (item) => item.prop === "carsBrandId"
          )
          if (parkingList.length > 0) parkingList[0].options = parkingListData
          if (brandList.length > 0) brandList[0].options = BrandListData
        } catch (err) {
          console.log(err)
        }
      },
    },
    mounted() {
      // 模拟 ajax 请求，异步渲染编辑器
      // setTimeout(() => {
      //   this.form_data.content = "<p>模拟 Ajax 异步设置内容 HTML</p>"
      // }, 1500)
    },
    beforeMount() {
      this.getCarsTypeBasis()
      this.getFormCarsBrand_ParkingList()
    },
    beforeDestroy() {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁编辑器
    },
  }
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang='scss'>
  .content {
    border: 1px solid #ccc;
    margin-top: 10px;
  }
  .toolbar {
    border-bottom: 1px solid #ccc;
  }
  .editor {
    height: 400px !important;
    overflow-y: hidden;
  }
</style>